<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-demo__dhgodsrentinfo}">
      <el-table v-loading="dataListLoading" :data="rentInfoDataList" border
                @selection-change="dataListSelectionChangeHandle"
                style="width: 100%;">
        <el-table-column prop="id" label="运动用品出租订单编号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="godsId" label="物品编号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="userId" label="租物人账号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="startTime" label="开始时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="rent" label="租金/元" header-align="center" align="center" width="150"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="250">
          <template slot-scope="scope">
            <el-button type="success" size="small"
                       @click="viewDetails(scope.row.godsId,scope.row.userId,scope.row.startTime,scope.row.endTime,scope.row.rent)">
              查看详情
            </el-button>
            <el-button type="primary" size="small"
                       @click="repay(scope.row.godsId,scope.row.userId,scope.row.startTime,scope.row.endTime)">归还
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <el-dialog title="订单详情" :visible.sync="dialogFormVisible" width="30%">
        <el-form ref="form" :model="rentInfoForm" label-width="80px">
          <el-form-item label="物品编号">
            <el-input v-model="rentInfoForm.godsId"></el-input>
          </el-form-item>
          <el-form-item label="物品名称">
            <el-input v-model="rentInfoForm.godsName"></el-input>
          </el-form-item>
          <el-form-item label="用户账号">
            <el-input v-model="rentInfoForm.userId"></el-input>
          </el-form-item>
          <el-form-item label="用户姓名">
            <el-input v-model="rentInfoForm.userName"></el-input>
          </el-form-item>
          <el-form-item label="花费/元">
            <el-input v-model="rentInfoForm.rent"></el-input>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-input v-model="rentInfoForm.startTime"></el-input>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-input v-model="rentInfoForm.endTime"></el-input>
          </el-form-item>
          <el-button v-if="expiredOrNot" type="danger" style="margin-left: 10px">已过租用时间，请尽快归还物品！</el-button>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="danger" @click="dialogFormVisible = false">关闭</el-button>
        </div>
      </el-dialog>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './dhgodsrentinfo-add-or-update'

export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/demo/dhgodsrentinfo/page',
        getDataListIsPage: true,
        exportURL: '/demo/dhgodsrentinfo/export',
        deleteURL: '/demo/dhgodsrentinfo',
        deleteIsBatch: true
      },
      dataForm: {
        id: ''
      },
      rentInfoDataList: [],
      dialogFormVisible: false,
      direction: 'ltr',
      rentInfoForm: {
        godsId: '',
        godsName: '',
        userId: '',
        userName: '',
        rent: '',
        startTime: '',
        endTime: ''
      },
      NowTime: '',
      expiredOrNot: false,
      GodsName: '',
      RentUserName: ''
    }
  },
  components: {
    AddOrUpdate
  },
  created() {
    this.getRentInfoDataList();
  },
  methods: {
    getRentInfoDataList() {
      this.$http.get('demo/dhgodsrentinfo/getRentInfoDataList/' + this.$store.state.user.id)
          .then(({data: res}) => {
            this.rentInfoDataList = res.data;
          }).catch(_ => {
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    /**
     * 查看详情
     * @param godsId
     * @param userId
     * @param startTime
     * @param endTime
     * @param rent
     */
    viewDetails(godsId, userId, startTime, endTime, rent) {
      this.getGodsName(godsId);
      this.getRentUserName(userId);
      this.checkExpiredOrNot(endTime);
      this.rentInfoForm.godsId = godsId;
      this.rentInfoForm.userId = userId;
      this.rentInfoForm.rent = rent;
      this.rentInfoForm.startTime = startTime;
      this.rentInfoForm.endTime = endTime;
      this.dialogFormVisible = true;
    },
    /**
     * 获取物品名称
     * @param godsId
     */
    getGodsName(godsId) {
      this.$http.get('demo/dhgodsinfo/getGodsName/' + godsId)
          .then(({data: res}) => {
            this.rentInfoForm.godsName = res.data.godsName;
          }).catch(_ => {
      })
    },
    /**
     * 获取租物人姓名
     * @param userId
     */
    getRentUserName(userId) {
      this.$http.get('demo/dhuserinfo/getRentUserName/' + userId)
          .then(({data: res}) => {
            this.rentInfoForm.userName = res.data.userName;
          }).catch(_ => {
      })
    },
    /**
     * 获取当前系统时间
     */
    getCurrentTime() {
      let nowTime = new Date(),
          year = nowTime.getFullYear(),
          month = nowTime.getMonth() + 1 >= 10 ? nowTime.getMonth() + 1 : '0' + (nowTime.getMonth() + 1),
          day = nowTime.getDate() >= 10 ? nowTime.getDate() : '0' + nowTime.getDate(),
          hours = nowTime.getHours() >= 10 ? nowTime.getHours() : '0' + nowTime.getHours(),
          minute = nowTime.getMinutes() >= 10 ? nowTime.getMinutes() : '0' + nowTime.getMinutes(),
          second = nowTime.getSeconds() >= 10 ? nowTime.getSeconds() : '0' + nowTime.getSeconds(),
          currentTime = "";
      currentTime = year + '-' + month + '-' + day + " " + hours + ":" + minute + ":" + second;
      this.NowTime = currentTime;
    },
    /**
     * 检查物品租用是否过期
     * @param endTime
     */
    checkExpiredOrNot(endTime) {
      this.getCurrentTime();
      this.expiredOrNot = this.NowTime >= endTime;
    },
    /**
     * 归还当前租赁物品
     * @param godsId
     * @param userId
     * @param startTime
     * @param endTime
     */
    repay(godsId, userId, startTime, endTime) {
      this.$confirm('确认已将租用物品归还至器材库？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('demo/dhgodsrentinfo/repay', {
          godsId: godsId,
          userId: userId,
          startTime: startTime,
          endTime: endTime
        })
            .then(({data: res}) => {
              this.getRentInfoDataList();
              this.$message({
                type: 'success',
                message: '归还物品成功！'
              })
            })
      })
    }
  }
}
</script>
